<template>
	<view class="single-item" @click="goProductDetail">
		<view class="img-wrapper">
			<!-- <image
        :src="spellKKillItem.imgUrl | resize(220)"
        class="good-img"
      ></image> -->
			<view class="good-img">
				<benefit-frame :imgUrl="spellKKillItem.imgUrl" :borderInfo="spellKKillItem.borderInfo" :wp="'220'">
				</benefit-frame>
			</view>
			<view class="img-mask-wrapper" v-if="spellKKillItem.productStatus">
				<image class="noting-img" src="https://ss.migudm.cn/malleoc/activity/img_sellout.png"></image>
			</view>
		</view>
		<view class="desc-wrapper">
			<view class="title multi-elps">
				<i class="miguIcon" v-if="spellKKillItem.commercialType == 2||spellKKillItem.spuType == 1"></i>
				{{ spellKKillItem.productName }}
			</view>
			<view class="bottom-box">
				<block v-if="isStart">
					<self-progress v-if="ifSpellKill" :progress="spellKKillItem.actProgress * 100"></self-progress>
					<self-progress v-else :progress="spellKKillItem.salePercent * 100"></self-progress>
				</block>
				<view class="bottom-price">
					<view class="price" v-if="ifSpellKill">
						<text class="mark">￥</text>{{ (spellKKillItem.actPrice / 100).toFixed(2) }}
					</view>
					<view class="price" v-else>
						<text class="mark">￥</text>{{ (spellKKillItem.actPrice / 100).toFixed(2) }}
					</view>
					<view class="original-price"><text class="mark">￥</text>{{ (spellKKillItem.marketPrice / 100).toFixed(2) }}
					</view>
				</view>
			</view>
			<block v-if="ifSpellKill">
				<button v-if="isStart" class="spell-kill-btn" :class="spellKKillItem.actProgress == 1 ? 'disabled-buy' : ''"
					@click.stop="goProductDetail(spellKKillItem.actProgress)">
					{{ ifSpellKill ? "去抢购" : "立即抢购" }}
				</button>
			</block>
			<block v-else>
				<button v-if="isStart" class="spell-kill-btn" :class="spellKKillItem.salePercent == 1 ? 'disabled-buy' : ''"
					@click.stop="goProductDetail(spellKKillItem.actProgress)">
					{{ ifSpellKill ? "去抢购" : "立即抢购" }}
				</button>
			</block>
			<view class="" v-if="!isStart && ifSpellKill">
				<button class="spell-kill-btn disabled-buy" >未开始</button>
				<!-- <image v-else class="clock-img" src="@/static/activity/remind_clock.png"
					@click.stop="remindMe($event, spellKKillItem, 1)"></image> -->
				<!-- <button v-else class="spell-kill-btn remind-btn"
			:class="remindTrue?'disabled-remind':''" 
			@click.stop="remindMe(spellKKillItem,1)">
			取消提醒
		</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import selfProgress from "./self-progress.vue";
	import config from '@/config.js'
	import benefitFrame from '@/components/benefitFrame/benefitFrame.vue';
	export default {
		data() {
			return {
				item: this.spellKKillItem,
			};
		},
		components: {
			selfProgress,
			benefitFrame
		},
		props: {
			spellKKillItem: {
				type: Object,
				default: () => {
					return {};
				},
			},
			currentActivity: {
				type: Object,
				default: () => {
					return {};
				},
			},
			isGray: {
				type: Boolean,
				default: false,
			},
			isStart: {
				//判断当前活动是否开始
				type: Boolean,
				default: true,
			},
			endTime: {
				type: [Number, String],
				default: 0,
			},
			currentTime: {
				//获取系统当前时间
				type: [Number, String],
				default: 0,
			},
			type: {
				//活动类型
				type: [Number, String],
				default: "",
			},
			participantType: Number,
			shopId: {
				//店铺id
				type: [Number, String],
				default: "",
			},
			index: {
				type: [Number, String],
				default: 0,
			},
		},
		computed: {
			remindTrue() {
				let endTime = this.endTime;
				let currentTime = this.currentTime;
				let difTime = endTime - currentTime;
				let minuteTime = 5 * 60 * 1000;
				if (difTime < minuteTime) return true;
				return false;
			},
			ifSpellKill() {
				return this.type == '01' || this.type == '03'
			}
		},
		methods: {
			goProductDetail(percent = 0) {
				if (percent == 1) return;
				this.spellKKillItem.index = this.index;
				this.goDetail(this.spellKKillItem)
			},
			// 提醒/取消提醒
			remindMe(e, item, reminderStatus) {
				if (!this.remindTrue) {
					let url = reminderStatus ?
						"marketing/cancelSeckillReminder" :
						"marketing/addSeckillReminder";
					const productUrl = location.origin + this.buildDetailUrl(item)
					let params = {
						activityId: item.activityId,
						spuId: item.spuId,
						shopId: this.shopId,
						productName: item.productName,
						productUrl
					};
					this.$Login.login({
						wxObj: e,
						success: () => {
							this.$request(url, params).then((data) => {
								this.$utils.toast(
									reminderStatus ? "已取消提醒，你可能会抢不到哦！" : "已成功设置，将在抢购前5分钟短信通知您！"
								);
								this.item.reminderStatus = reminderStatus ? 0 : 1;
							}, err => {
								if (err.resultCode == 'MS2500') this.$emit('refresh')
							});
						}
					})
				}
			},
			buildDetailUrl(spellKKillItem) {
				let spuId = spellKKillItem.spuId;
				let activityStatus = 2; //activityStatus 1预售、2秒杀、3拼团、4预约
				if (this.type == "02" || this.type == "04") activityStatus = 3;
				const skuId = spellKKillItem.skuIdList[0]
				let routeUrl = `/pages/goods/detail?activityStatus=${activityStatus}&spuId=${spuId}`
				if (skuId) routeUrl += `&skuId=${skuId}`
				if (this.currentActivity.id) routeUrl += `&acId=${this.currentActivity.id}`
				return routeUrl
			},
			// 列表点击跳到详情页
			goDetail(spellKKillItem) {
				if (this.participantType == 2) {
					// 会员秒杀
					if (!this.$globalData.state.token) {
						// 未登录
						this.$utils.toast("您未登陆");
						return;
					} else if (!this.isVip) {
						this.$utils.toast("您还不是咪咕PLUS会员，无法购买~");
						return;
					}
				}
				let name = '';
				switch (this.type) { //01 秒杀全网 03秒杀会员 02拼团全网 04拼团会员
					case "01": //秒杀全网
						name = "秒杀全网";
						break;
					case "03": //秒杀会员
						name = "秒杀会员";
						break;
					case "02":
						name = "拼团全网";
						break;
					case "04":
						name = "拼团会员";
						break;
				}
				var statInfo = {
					'Ref_Module_Type': name,
					'Ref_Module_ID': this.type,
					'Ref_Module_Inner_Order': spellKKillItem.index + 1
				}

				this.$routeUtils.navigateTo({
					url: this.buildDetailUrl(spellKKillItem)
				}, statInfo);
			}
		},
	};
</script>
<style lang="scss">
	@import "../../../style/mixins";

	.single-item {
		position: relative;
		display: flex;
		padding: 20rpx 0 0 20rpx;

		.img-wrapper {
			position: relative;
			margin-right: 24rpx;
			line-height: 0;
			border-radius: 8rpx;
			overflow: hidden;

			.good-img {
				width: 220rpx;
				height: 220rpx;
				border-radius: 8rpx;
				overflow: hidden;
			}

			.img-mask-wrapper {
				@include flex(center, center);
				position: absolute;
				top: 0;
				width: 220rpx;
				height: 220rpx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 4px;

				.noting-img {
					width: 102rpx;
					height: 34rpx;
				}
			}
		}

		.desc-wrapper {
			height: 240rpx;
			width: 432rpx;
			position: relative;

			.title {
				height: 80rpx;
				padding-right: 20rpx;
			}
		}

		.price {
			color: #ff004f;
			font-size: 18px;
			line-height: 15px;

			.mark {
				font-size: 12px;
			}
		}

		.original-price {
			color: #e2e2e2;
			text-decoration: line-through;
			font-size: 12px;
			margin-left: 5rpx;
		}

		.bottom-box {
			position: absolute;
			bottom: 38rpx;
			width: 100%;
			right: 0;

			.bottom-price {
				margin-top: 27rpx;
				display: flex;
				align-items: flex-end;
			}
		}

		.spell-kill-btn {
			position: absolute;
			right: 15rpx;
			bottom: 38rpx;
			width: 120rpx;
			height: 48rpx;
			// margin-right: 20rpx;
			line-height: 48rpx;
			padding: 0;
			font-size: 12px;
			background: #ff004f;
			color: #fff;
			border-radius: 24rpx;
			white-space: nowrap;

			&.disabled-buy {
				background: #e2e2e2;
			}

			&.remind-btn {
				background: rgb(82, 185, 72);
			}

			&.disabled-remind {
				background: #fff;
				color: #FF004F;
			}
		}

		.clock-img {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 32rpx;
			bottom: 38rpx;
		}
	}
</style>